<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

<ui:composition template="/templates/photoTemplate.xhtml">

	<ui:define name="title">
	#{i18N.getTrans('title.PalmaVacationHome')}
	</ui:define>

	<ui:define name="navReferences">

	</ui:define>

	<ui:define name="body">
	
		<h1>#{i18N.getTrans('Apartment')}</h1>		

		<div style="position: relative;">

			<h:link outcome="calendar">
				<div id="reservation" class="bubble"
					style="left: 100px; top: 60px; width: 200px; height: 200px; border-radius: 280px; padding: 50px;">
					<span style="position: relative; left: -10px; top: 0px;"> 
						<span class="bubbleTitle"
						style="position: relative; left: 0px; top: 10px; font-weight: bolder; font-size: 50px;">
							<h:outputText value="#{i18N.getTrans('bubble.title.ReservationAndCalendar')}" escape="false" />
						</span>
					</span>
					<div class="bubbleSubText"
							style="font-size: 16pt; color: rgba(255, 255, 255, 0); line-height: 26px; position: absolute; left: 10px; top: 145px; text-align: center;">
							<h:outputText value="#{i18N.getTrans('bubble.text.ReservationAndCalendar')}" escape="false" />
							
						</div>
				</div>
			</h:link>
			
			<script>

			$("#reservation").mouseenter(function() {
				$(".bubbleTitle").animate({
				opacity: 0.5,
				fontSize: "34px",
				color: "red",
				top: "-=20",
				right: "+=30"
				//left: "+=50",
				//height: "toggle"
				}, 400 , function() {
				// Animation complete.
				}
				);

				$(".bubbleSubText").animate({
					opacity: 1,
					//fontSize: "30px",
					color: "black"
					//left: "+=50",
					//height: "toggle"
					}, 700 , function() {
					// Animation complete.
					}
					);
				
			}).mouseleave(function() {
				$(".bubbleTitle").animate({
					opacity: 1,
					fontSize: "50px",
					color: "black",
					top: "+=20",
					right: "-=30"
					//left: "+=50",
					//height: "toggle"
					}, 1000 , function() {
					// Animation complete.
					}
					);

				$(".bubbleSubText").animate({
					opacity: 0.25,
					//fontSize: "30px",
					color: "rgba(255, 255, 255, 0)"
					//left: "+=50",
					//height: "toggle"
					}, 1000 , function() {
					// Animation complete.
					}
					);
				});
			
			</script>

			<a href="#{navigationController.urlPicsApartment}" target="_blank">
				<div id="appartment" class="bubble"
					style="left: 0px; top: 450px; width: 80px; height: 80px; border-radius: 100px; padding: 50px; font-size: 24pt;">
					<span style="position: relative; left: -20px; top: -20px;"> <span
						style="position: relative; left: -20px; font-weight: bolder; font-size: 36pt;"><h:outputText value="#{i18N.getTrans('bubble.title.Wohnung')}" escape="false" /></span>
						<span
						style="font-size: 14pt; color: silver; position: relative; left: -10px; top: -20px;"><h:outputText value="#{i18N.getTrans('bubble.text.Wohnung')}" escape="false" /></span>
					</span>
				</div>
			</a>

			<a href="#{navigationController.urlPicsCity}" target="_blank">
				<div id="antiqueCity" class="bubble" style="left: 250px; top: 450px; width: 80px; height: 80px; border-radius: 100px; padding: 50px; font-size: 24pt; ">
					<span style="position: relative; left: 0px; top: -10px;"> 
					<span
						style="position: relative; left: -20px; font-weight: bolder; font-size: 36pt;"><h:outputText value="#{i18N.getTrans('bubble.title.Altstadt')}" escape="false" /></span>
						<span style="font-size: 22pt; color: silver; position: relative; left: -10px; top: -10px;"><h:outputText value="#{i18N.getTrans('bubble.text.Altstadt')}" escape="false" /></span>
					</span>
				</div>
			</a>

			<a href="#{navigationController.urlPicsLand}" target="_blank">
				<div id="islandAndCulture" class="bubble"
					style="left: 500px; top: 450px; width: 80px; height: 80px; border-radius: 100px; padding: 50px; font-size: 24pt;">
					<span style="position: relative; left: -20px; top: -20px;"> <span
						style="position: relative; left: -20px; font-weight: bolder; font-size: 36pt;"><h:outputText value="#{i18N.getTrans('bubble.title.Island')}" escape="false" /></span>
						<span
						style="font-size: 20pt; color: silver; position: relative; left: -10px; top: -10px;"><h:outputText value="#{i18N.getTrans('bubble.text.Island')}" escape="false" /></span>
					</span>
				</div>
			</a>

		</div>
	</ui:define>
</ui:composition>
</html>
